<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<!-- saved from url=(0050)http://uc.tmooc.cn/userCenter/jumpToUserCenterInfo -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>个人中心</title>
     <link rel="stylesheet" href="../css/cropper.min.css">
     <link rel="stylesheet" href="../css/iconfont.css">
     <link rel="stylesheet" href="../css/pstyle.css">
     <script src="../js/jquery-2.1.1.js"></script>
<link rel="stylesheet" href="../css/layer.css" id="layuicss-layer"></head>
<body class="bg-f5f6fax">
<div class="page-header md-class-other">
         
<script>
window.IS_UC_PAGE_ = true; //用户中心页面标识
</script>

<div class="md2018033001lty">
    <div class="container">
        <div class="tmooc-logo pull-left">
            <a href="http://www.tmooc.cn/">
                <img class="default-logo" src="img/tmooc-logo.png">
                <img class="blue-logo" src="img/tmooc-logo2.png">
            </a>
        </div>
        <ul class="slide-nav pull-left clearfix" id="js_slide_nav">
            <li><a href="http://www.tmooc.cn/">首页</a></li>
            <li><a href="http://www.tmooc.cn/free/">免费课</a></li>
            <li><a href="http://www.tmooc.cn/live/">直播课</a></li>
            <li><a href="http://www.tmooc.cn/vip/">会员课</a></li>
            <li><a href="http://www.tmooc.cn/advanced/">培优课</a></li>
            <li><a href="javascript:void(0);" onclick="checkTtsUser()">线上班（VIP）</a></li>
            <li><a href="http://www.tmooc.cn/offline_courses/">线下班</a></li>
            <li><a href="http://www.tmooc.cn/activities/">最新活动</a></li>
        </ul>
        <div class="login-area pull-right " id="login_statelty">
            <!--未登录状态-->
            <ul class="no-login clearfix" style="display: none;">
                <li><a id="register_xxw" href="http://uc.tmooc.cn/login/jumpToRegister">注册</a></li>
                <li class="line">|</li>
                <li><a id="login_xxw" href="http://uc.tmooc.cn/userCenter/jumpToUserCenterInfo#">登录</a></li>
            </ul>
            <!--登录状态-->
            <div class="logined hide" style="display: block;">
                <div class="md-2018040202-lty">
                    <div class="drop-menu" id="js_init_dropmenu">
                        <div class="md-2018040801-lty">
                            <a href="http://uc.tmooc.cn/userCenter/toUserCenterPage" target="_self">
                                <img class="js-headpic-xxw" id="tobbar_userimg" src="img/user-head.jpg" alt="">
                            </a>
                        </div>
                        <ul class="drop-menu-list bgcolor-fff">
                            <li class="user-name link-color"><a href="http://uc.tmooc.cn/userCenter/toUserCenterPage" id="tobbar_username" target="_self">513808675@qq.com</a></li>
                            <li><a href="http://uc.tmooc.cn/userCenter/jumpToUserCenterInfo#" id="js_go_ynote">我的云笔记</a></li>
                            <li id="js_isshow_tts" style=""><a style="cursor: pointer;" onclick="checkTtsUser()">我的TTS</a></li>
                            <li><a href="http://uc.tmooc.cn/userCenter/jumpToUserCenterInfo#" id="js_loginout">退出</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="search-wrap pull-right">
            <div class="search-area">
                <input id="js_search_inp" type="text" class="search-input" placeholder="您想学的课程">
            </div>
            <div class="showhide-search" id="js_control_search">
                <i class="cusfont cusfont-search"></i>
            </div>
        </div>
    </div>
</div>
</div>
<div class="page-body">
    <div class="top-bg-xxw01">
        <!--<div class="container"></div>-->
    </div>
    <div class="container md-2018040805-xxw">
        <div class="user-cneter-contianer">
              


            <div class="md-2018040806-xxw">
                <div class="md-2018040801-lty">
                    <a href="http://uc.tmooc.cn/userCenter/jumpToUserCenterInfo#">
                        <img class="js-headpic-xxw" src="img/user-head.jpg" alt="">
                    </a>
                </div>
                <div class="top-navx-list clearfix font-16">
                    <a href="http://uc.tmooc.cn/userCenter/toUserCoursePage" value="wodekecheng">我的课程</a>
                    <a href="http://uc.tmooc.cn/userCenter/jumpToUserCenterInfo" id="yunbiji" value="yunbiji">我的云笔记</a>
                    <a href="http://uc.tmooc.cn/userCenter/jumpToUserCenterInfo" value="zhanghaoshezhi" class="active">账号设置</a>
                    <a href="http://uc.tmooc.cn/tmoocVipCenter/vipcenter" value="huiyuanzhongxin">会员中心</a>
                    <a href="http://uc.tmooc.cn/userCenter/userValidate" value="userValidate">TTS账号验证</a>
                    <a class="last-mesx" value="" href="http://uc.tmooc.cn/userCenter/toUserMessagePage"><i class="cusfont cusfont-news"></i>
                    	
                    </a>
                </div>
                <p class="user-namebox color-999">
                    <span class="user-name-xxw color-333">
                      513808675@qq.com
                    </span>欢迎回来！
                </p>
            </div>
                 <script src="../js/jquery-cookie.js"></script>
            <script>
            	//遍历标签，加载属性
            	if('zhanghaoshezhi'.length!=0){
	            	$('.top-navx-list a').each(function(){
	            		if($(this).attr('value')=='zhanghaoshezhi'){
	            			$(this).addClass("active");
	            		}else{
	            			$(this).removeClass("active");
	            		}
	            		
	            	});
            	}
            	$('#yunbiji').on('click',function(){
            		 window.open("http://inote.tmooc.cn"+"/login/loginnow?sessionId="+$.cookie("TMOOC-SESSION"));
            	})
            </script>
            <div class="md-2018040807-xxw clearfix">
              <ul class="pull-left md2018040401-menux bgcolor-fff font-16">
                    <li class="active"><a href="http://uc.tmooc.cn/userCenter/jumpToUserCenterInfo"><span class="md2018040401-lefttextx">完善信息 </span><i class="cusfont cusfont-more iconx"></i></a></li>
                    <li><a href="http://uc.tmooc.cn/userCenter/jumpToUserCenterSecurity"><span class="md2018040401-lefttextx">账户安全 </span><i class="cusfont cusfont-more iconx"></i></a></li>
                </ul>
                <div class="right-contx bgcolor-f6f5fa pull-right">
                    <div class="top-titx font-16">基本信息</div>
                    <div class="set-20180409-ccj">
                    	<div class="item set-info">
                    	    <!--头像-->
                    	    <div id="js_open_pic" class="user-pic text-center">
                    	        <div class="img-box">
                                    <img src="http://uc.tmooc.cn/userCenter/jumpToUserCenterInfo">
                    	        </div>
                    	        <p class="succ" style="cursor: pointer;">修改头像</p>
                            </div>
                            
                            <!--表格-->
                            <form autocomplete="off">
                    	    <div id="js_userinfo_form" class="form-ele-box form-inline-box">
                                <div class="form-item clearfix">
                                    <label class="form-label">用户姓名</label>
                                    <div class="form-inp-area">
                                        <input id="js_userName" class="form-input" value="513808675@qq.com" name="js_userName" cusrule="nickname" cuslength="2,12" type="text" placeholder="请输入您的姓名">
                                        <span class="form-tips">包含中文、数字、字母、下划线的2-12位</span>
                                    </div>
                                    <div class="form-inlineblock pull-left bind succ" style="margin-left: 6px;">
                                        <span class="verflag"></span>
                                        <i class="verflag"></i>
                                    </div>
                                </div>
                                <div class="form-item clearfix">
                                    <label class="form-label">用户昵称</label>
                                    <div class="form-inp-area">
                                       <input id="js_nickName" class="form-input" value="513808675@qq.com" name="js_nickName" cusrule="nickname" type="text" placeholder="请输入用户昵称">
                                        <span class="form-tips">包含中文、数字、字母、下划线的4-12位</span>
                                    </div>
                   <!--                  <div class="form-inlineblock pull-left bind error" style="margin-left: 6px;width: auto;">
                                        <span class="verflag">*设置成功后将不能更改</span>
                                        <i class="verflag"></i>
                                    </div> -->
                                </div>
                                <div class="form-item clearfix">
                                    <label class="form-label">学历</label>
                                    <div class="x-choose-down">
                                        <div class="x-ipt-group pull-left" id="x_educationbg">
                                            <div class="custom_sel_text"></div>
                                            <ul id="js_selectformal" class="custom_sel_list" style="display: none;"><li class="option" ord_id="10081001">高中以下</li><li class="option" ord_id="10081002">高中</li><li class="option" ord_id="10081004">大专</li><li class="option" ord_id="10081005">本科</li><li class="option" ord_id="10081006">硕士</li><li class="option" ord_id="10081003">中专/技校</li><li class="option" ord_id="10081007">博士</li><li class="option" ord_id="10081008">MBA/EMBA</li></ul>
                                            <span class="text-center">
                                                <i class="cusfont cusfont-under"></i>
                                                <i class="verflag"></i>
                                            </span>
                                            <input type="hidden" class="custom_sel_val" id="x_educationbg_val" value="" name="x_educationbg_val">
                                        </div>
                                    </div>
                                </div>
       <!--                          <div class="form-item clearfix">
                                    <label class="form-label">职业状态</label>
                                    <div class="x-choose-down pull-left">
                                        <div class="x-ipt-group" id="x_zhiye">
                                            <div class="custom_sel_text"></div>
                                            <ul id="js_selectProfessional" class="custom_sel_list" style="display: none;">
                                                <li class="option" ord_id="1">学生</li>
                                            </ul>
                                            <span class="text-center">
                                                <i class="cusfont cusfont-under"></i>
                                                <i class="verflag"></i>
                                            </span>
                                            <input type="hidden" class="custom_sel_val" id="x_zhiye_val" name="x_zhiye_val">
                                        </div>
                                    </div>
                                </div> -->
                                <div class="form-item clearfix">
                                    <input id="js_img_src" type="hidden" value="">
                                </div>
                                <div class="form-item clearfix">
                                    <label class="form-label"></label>
                                    <button id="js_updateUser" class="form-btn form-btn-blue" type="button">确认修改</button>
                                </div>
                            </div>
                    	    </form>
                    	</div>
                    	<!--头像上传弹窗-->
                        <div style="display: none;">
                            <div id="js_user_mask" class="set-20180409-ccj">
                            	<div class="user-mask">
                            	    <span class="js-closewin-btn close"><i class="cusfont cusfont-close font-14"></i></span>
                                    <div id="js_img_div" class="img-area">
                                        <img>
                                    </div>
                                    <p class="text-center">支持：300KB 以内的 *.jpg、*.png 格式的图片</p>
                                    <div class="btn-area text-center">
                                        <div class="form-btn-inp">
                                            <button class="form-btn form-btn-blue" type="button">选择</button>
                                            <input class="selec-but" id="selectImg" type="file">
                                        </div>
                                        <!--<button id="resetImg" class="form-btn form-btn-blue" type="button" disabled="disabled">重置</button>-->
                                        <button id="js_upImg" class="form-btn form-btn-blue" type="button" disabled="disabled">上传</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--头像上传弹窗 end-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="page-footer">
             
<div class="container">
    <div class="md2018040301lty clearfix">
        <div class="bt-fr clearfix pull-right">
            <div class="b-info text-right pull-left">
                <p>达内精品在线WWW.TMOOC.CN 专注于IT职业技能培训 </p>
                <p>涵盖20余门课程体系，致力于打造最权威的IT职业教育学习平台</p>
            </div>
            <div class="ewm-b pull-left">
                <img src="img/erweima.jpg" width="75" height="75" alt="">
            </div>
        </div>
          <div class="bt-lf clearfix pull-left">
            <ul class="links clearfix">
                <li><a href="http://www.tmooc.cn/aboutus/index.shtml">关于我们</a></li>
                <li>|</li>
                <li><a href="http://www.tmooc.cn/join/index.shtml">招聘信息</a></li>
                <li>|</li>
                <li><a href="http://www.tmooc.cn/contactus/index.shtml">联系我们</a></li>
                <li>|</li>
                <li><a href="http://www.tmooc.cn/business/index.shtml">商务合作</a></li>
                <!--<li>|</li>
                <li><script src="https://s13.cnzz.com/z_stat.php?id=1273669604&web_id=1273669604" language="JavaScript"></script></li>-->
            </ul> 
            <p class="copyright">Copyright © 达内科技有限公司版权所有 京ICP备12003709号-2</p>
        </div>
        <div class="bt-line"></div>
    </div>
</div>

<!-- 支付状态弹窗 start  -->
<div style="display: none;">
    <div class="md-2018040423-ll cus-win-model" id="md_2018040423_ll">
        <div class="tit">支付完成</div>
        <p style="text-align: center;"><img src="img/img2018042301_ll.png"></p>
        <div style="text-align: center; padding-top: 10px;">
        	<p class="color-red" id="js_error_tips" style="margin: 5px 0;opacity: 0;"><i class="cusfont cusfont-warning "></i>未支付成功，请在支付页面继续完成支付！</p>
            <a class="form-btn form-btn-default js-closewin-btn" style="line-height: 24px; margin: 0 10px;" href="http://www.tmooc.cn/help/index.shtml" target="_blank">支付遇到问题</a>
            <button class="form-btn form-btn-blue" type="button" id="js_pay_btn">已支付完成</button>
        </div>
        <span class="cus-win-modelclose js-closewin-btn"><i class="cusfont cusfont-close font-14"></i></span>
    </div>
</div>
<!-- 支付状态弹窗 end -->
<!-- TTS用户验证start -->
<div style="display: none;">
    <div class="md2018041301lty bgcolor-fff cus-win-model" id="js_yz_video">
        <div class="tit-md">
            <span>提示</span>
            <span class="cus-win-modelclose js-closewin-btn"><i class="cusfont cusfont-close font-14"></i></span>
        </div>
        <div class="con-bd">
            <p class="font-16 text-center">您需要进行账号验证<br>请<a href="http://uc.tmooc.cn/userCenter/userValidate" class="link-color">点击此处</a>跳转</p>
        </div>
    </div>
</div>
<!-- TTS用户验证end -->

 <script src="../js/layer.js"></script>
 <script src="../js/jquery.colorbox-min.js"></script>
 <script src="../js/app.js"></script>
 
<script type="text/javascript">
    $(function(){
        getUserLoginStatus(); //获取用户登录状态信息
        /*点击搜索按钮*/
        $('#js_control_search').click(function(){
            var k_ = $.trim($('#js_search_inp').val());

            if(window.SEARCHPAGE_){
                if(k_){
                    $('.js-key-word').eq(0).text(k_);

                    resetSearch(1);

                    flag_ = true;

                    getClasslset(getSearchobj({searchCore:k_}));

                }
                layer.msg('请输入搜索内容');
                return;
            }else {
                location.href='http://www.tmooc.cn/search/index.shtml#searchCore='+encodeURI(encodeURI(k_));//+'categoryId='+($(".js-lv-xxw span.curx").data('id') || "0");
            }
            $('#js_search_inp').val('');
        });
        $('#js_search_inp').keypress(function(e){
            if(e.keyCode===13){
                $('#js_control_search').trigger('click');
            }
        });
    });
</script>
</div>
        <script src="../js/cropper.min.js"></script>
		<script src="../js/jquery.colorbox-min.js"></script>
        <script src="../js/app.js"></script>
<script>
    $(function () {
    	// 学历、职位回填
        var u_edu = '';
        var u_pos = '';
    	
        // 下拉框数据
        function createSelect(id, code, callback) {
            var $obj = $('#'+ id);
            if($obj.length){
                $.post(UC_PATH_ +"/userCenter/getData", {code: code}, function(res){
                    var arr = [];
                    for (var i = 0; i < res.length; i++) {
                        arr.push('<li class="option" ord_id='+ res[i].code +'>'+ res[i].name +'</li>');
                    }
                    $obj.html(arr.join(''));
                    callback && callback(res);
                });
            }
            
        }
        // 下拉框
        cusmot_select_fun('x_educationbg');
        cusmot_select_fun('x_zhiye');
      	//学历
        createSelect('js_selectformal', '1008', function(res){
            (u_edu != 'null' || u_edu != '') && $('#js_selectformal').find('li[ord_id="'+ u_edu +'"]').trigger('click.cusselect');
        });
        // 职位
        createSelect('js_selectProfessional', '1023', function(res){
            (u_pos != 'null' || u_pos != '') && $('#js_selectProfessional').find('li[ord_id="'+ u_pos +'"]').trigger('click.cusselect');
        });
        // 修改信息
        $('#js_updateUser').click(function(){
            if( validateForm('js_userinfo_form').form() ){
                $.post(UC_PATH_ +'/userCenter/updateUser', {
                    realName: $.trim( $('#js_userName').val() ),
                    nickName: $.trim( $('#js_nickName').val() ),
                    education: $('#x_educationbg_val').val(),
                    professionalStatus: $('#x_zhiye_val').val(),
                    pictureUrl: $('#js_img_src').val(),
                }, function(res){
                    if(res.code ==1){
        /*                 layer.msg("修改成功");
                        $('.js-headpic-xxw').attr('src', $('#js_img_src').val());
                        setTimeout(function(){getUserLoginStatus();}, 1000); */
                    	layer.msg('修改成功，2s后刷新',{time: 2000, end:function(){window.location.reload()}});
                    	$('#js_pwd_old, #js_pwd_new, #js_pwd_new_m').val('');
                    }else{
                    	if(res.code == -2013){
                    	   	 layer.msg("昵称重复");
                    	} else {
                       	 layer.msg("修改失败");
                    	}
                    }
                });
            }
        });
        
        
        // 上传方法
        var _imgObj = $('#js_img_div>img');
        var cp_opt = {
                aspectRatio: 1 / 1,
                //preview: '.img-preview',
                //background:false,
                guides: false,
                autoCropArea: 0.6,
                fileSize: 1024 * 300
                //touchDragZoom: false
            },
            _imgType = 'images/jpeg',
            _imgTypeReg = /(image\/jpeg)|(image\/png)/;
        var cutUpImg = {
            changeImg: function(evt) {
                var file_ = this.files[0],
                    URL_ = window.URL || window.webkitURL,
                    _blobURL,
                    objURL_;

                if(file_) {
                	if(file_.size > cp_opt.fileSize){
                        layer.msg('图片大小超出限制');
                        return false;
                    }
                	
                    $('#resetImg,#js_upImg').removeAttr('disabled');
                    _imgType = file_.type;
                    if(_imgTypeReg.test(file_.type)) {
                        if(URL_) { //兼容ie10
                            if(objURL_) {
                                URL_.revokeObjectURL(objURL_);
                            }
                            
                            objURL_ = URL_.createObjectURL(file_);
                        } else {
                            layer.msg('该浏览器，暂不支持URL!');
                            return false;
                        }
                        _imgObj.cropper('destroy').attr('src', objURL_).cropper(cp_opt);
                    } else {
                        layer.msg('请选择jpg/png格式图片!');
                    }
                }
                $(this).val('');
            },
            resetImg: function(evt) {
                _imgObj.cropper('destroy').attr('src', '');
                $(this).attr({
                    'disabled': 'disabled'
                });
                $('#js_upImg').attr({
                    'disabled': 'disabled'
                });
            },
            upImg: function(callback) {
                $(this).attr({
                    'disabled': 'disabled'
                });
                var cvsData = _imgObj.cropper('getCroppedCanvas');
                var newbase64 = cvsData.toDataURL(_imgType, 1).split(',')[1];
                $.ajax({
                    type: 'POST',
                    url: UC_PATH_ +'/userCenter/uploadHeandImg',
                    data: {
                        'fbase64': newbase64
                    },
                    success: function(res) {
                        $(this).removeAttr('disabled');
                        //TODO
                        callback && callback(res);
                    }
                });
            }
        };
        $('#js_open_pic').click(function(){
            $.colorbox({
                speed: 0,
                inline: true,
                overlayClose: false,
                close: false,
                href: "#js_user_mask",
                onClosed: function(){
                	cutUpImg.resetImg();
                }
            });
        });
        $('#selectImg').on('change', cutUpImg.changeImg);
        $('#js_upImg').on('click', function(){
            cutUpImg.upImg(function(res){
                if(res.code == 1){
                    layer.msg('上传成功');
                    // res.obj
                    _imgObj.cropper('destroy').attr('src', '');
                    $('#js_open_pic img').attr('src', res.obj);
                    $('#js_img_src').val(res.obj);
                    $.colorbox && $.colorbox.close();
                }else{
                    layer.msg('上传失败');
                }
            });
        });
    })
</script>


<div id="cboxOverlay" style="display: none;"></div><div id="colorbox" class="" role="dialog" tabindex="-1" style="display: none;"><div id="cboxWrapper"><div><div id="cboxTopLeft" style="float: left;"></div><div id="cboxTopCenter" style="float: left;"></div><div id="cboxTopRight" style="float: left;"></div></div><div style="clear: left;"><div id="cboxMiddleLeft" style="float: left;"></div><div id="cboxContent" style="float: left;"><div id="cboxTitle" style="float: left;"></div><div id="cboxCurrent" style="float: left;"></div><button type="button" id="cboxPrevious"></button><button type="button" id="cboxNext"></button><button type="button" id="cboxSlideshow"></button><div id="cboxLoadingOverlay" style="float: left;"></div><div id="cboxLoadingGraphic" style="float: left;"></div></div><div id="cboxMiddleRight" style="float: left;"></div></div><div style="clear: left;"><div id="cboxBottomLeft" style="float: left;"></div><div id="cboxBottomCenter" style="float: left;"></div><div id="cboxBottomRight" style="float: left;"></div></div></div><div style="position: absolute; width: 9999px; visibility: hidden; display: none; max-width: none;"></div></div></body></html>